<template>
  <div class="content-box">
    <div class="content">
      <div class="content-item">
            <button class="button" id="start">开始识别</button>
            <div class="connecting display-none" id="connecting">建立连接中...</div>
            <span class="recognizing display-none" id="recognizing">识别中...</span>
            <button class="button end-btn" id="end">结束识别</button>
      </div>
      <div class="content-item">
        <div id="recognizeText" class="recognize-content"></div>
      </div>
    </div>
  </div>
</template>

<script>
// zz.25-11.04.腾讯语音/实时语音 开始和结束方法说明，（开始结束中同步调用腾讯云和浏览器接口，所有监听代码都是监听浏览器）
export default {
  name: 'TencentSpeech',
  data() {
    return {
      params: {
        signCallback: signCallback, // 鉴权函数 用户提供鉴权函数，不传则为null
        secretkey: 'WosiL4czA7sRmtoX4NSL0RecNvHQN6aq',
        secretid: 'AKIDBG9oHYbPyJRM2ThhS1NXTJ1mLi2ECylQ',
        appid: 1332379978,
        // 实时识别接口参数
        engine_model_type: '16k_zh', // 引擎
        voice_format: 1,
        // 以下为非必填参数，可跟据业务自行修改
        hotword_id: '08003a00000000000000000000000000',
        needvad: 1,
        filter_dirty: 1,
        filter_modal: 1,
        filter_punc: 1,
        convert_num_mode: 1,
        word_info: 2
      },
      isRecording: false,
      pressTimer: null,
      recorder: null,
      speechRecognizer: null,
      isCanSendData: false,
      isCanStop: false,
      resultText: '',
    };
  },
  mounted() {

    let recorder;
    let speechRecognizer;
    let isCanSendData = false;
    let isCanStop;

    const params = {
        signCallback: signCallback, // 鉴权函数 用户提供鉴权函数，不传则为null
        // 用户参数
        secretid: 'AKIDBG9oHYbPyJRM2ThhS1NXTJ1mLi2ECylQ',
        appid: 1332379978,
        // 实时识别接口参数
        engine_model_type : '16k_zh', // 引擎
        voice_format : 1,
        // 以下为非必填参数，可跟据业务自行修改
        hotword_id : '08003a00000000000000000000000000',
        needvad: 1,
        filter_dirty: 1,
        filter_modal: 1,
        filter_punc: 1,
        convert_num_mode : 1,
        word_info: 2
    }
    $('#start').on('click', function () {
        const areaDom = $('#recognizeText');
        let resultText = '';
        $(this).hide();
        $('#connecting').show();
        speechRecognizer = null;
        isCanSendData = false;
        // 获取录音数据
        recorder = new WebRecorder();
        recorder.OnReceivedData = (res) => {
          // console.log(res) // res 为采集到浏览器数据
          if (isCanSendData) {
            // 发送数据
            speechRecognizer.write(res);
          }
        };
        // 录音失败时
        recorder.OnError = (err) => {
          console.log(err);
          recorder.stop();
        };
        recorder.start();

      if (!speechRecognizer) {
        speechRecognizer = new SpeechRecognizer(params);
      }

      // 开始识别
      speechRecognizer.OnRecognitionStart = (res) => {
        console.log('开始识别', res);
        isCanSendData = true;
        isCanStop = true;
        $('#connecting').hide();
        $('#end').show();
        $('#recognizing').show();
      };
      // 一句话开始
      speechRecognizer.OnSentenceBegin = (res) => {
        console.log('一句话开始', res);
      };
      // 识别变化时
      speechRecognizer.OnRecognitionResultChange = (res) => {
        console.log('识别变化时', res);
        const currentText = `${resultText}${res.result.voice_text_str}`;
        areaDom.text(currentText);
      };
      // 一句话结束
      speechRecognizer.OnSentenceEnd = (res) => {
        console.log('一句话结束', res);
        resultText += res.result.voice_text_str;
        areaDom.text(resultText);
      };
      // 识别结束
      speechRecognizer.OnRecognitionComplete = (res) => {
        console.log('识别结束', res);
        isCanSendData = false;
      };
      // 识别错误
      speechRecognizer.OnError = (res) => {
        console.log('识别失败', res);
        isCanSendData = false;

        $('#end').hide();
        $('#recognizing').hide();
        $('#connecting').hide();
        $('#start').show();
      };

      // 建立连接
      speechRecognizer.start();

    });


    $('#end').on('click', function () {
        $(this).hide();
        $('#start').show();
        $('#recognizing').hide();
        recorder.stop();
        if (isCanStop) {
          speechRecognizer.stop();
        }
    });


  },
  methods: {
    init() {
 
    },

  }
}
</script>

<style scoped>
/* 无需额外CSS，因为已通过public/index.html引入 */
.content-box .content {
  width: 100%;
  overflow: hidden;
  margin: 100px auto;
}

.content .content-item {
  width: 50%;
  float: left;
  text-align: center;
}

.left-content {
  width: 100%;
  height: 300px;
}

.connecting {
  color: #999;
  margin: 50px 0;
}

.recognizing {
  color: #999;
  margin: 0 10px;
}

.content .content-item .button {
  background: #187cff;
  border: 1px solid #478eea;
  color: #fff;
  text-align: center;
  border-radius: 3px;
  cursor: pointer;
  width: 160px;
  height: 40px;
  margin: 50px 0;
}

.button.end-btn {
  display: none;
}

.recognize-content {
  height: 200px;
  width: 360px;
  background-color: #eee;
  border: 1px solid #eee;
  border-radius: 5px;
  margin: auto;
  text-align: left;
  padding: 10px;
  box-sizing: border-box;
  overflow: scroll;
}

.display-none {
  display: none;
}
</style>